import React, { useState } from "react";
import TheButton from "@/components/TheButton";
import TheTable from "@/components/TheTable";
import { SearchOutlined } from '@ant-design/icons';
import { Button, Table, Modal, InputNumber, Popconfirm, Input, Pagination, Radio, Form } from 'antd';
import ThePagination from "@/components/ThePagination";
import TheDialog from "@/components/TheDialog";
import './style.less'
import PropTypes from 'prop-types'
import { apiGetSheetDetailPage, apiGetSheetDetailActivePage, apiGetSheetDetailActiveAdd, apiGetSheetDetailActiveDel } from '@/request/coupons'

class Coupons extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            columns: [
                {
                    title: "优惠券名称",
                    dataIndex: "couponTitle",
                    key: "couponTitle",
                    render: (text, record) => {
                        return <div className="p-white-space" style={{ width: 180 }}>{record.couponTitle}</div>
                    }
                },
                {
                    title: "优惠券类型",
                    dataIndex: "couponType",
                    key: "couponType",
                    render: (text, record) => {
                        let label = ''
                        switch (text) {
                            case 'J':
                                label = '代金券';
                                break;
                            case 'Z':
                                label = '折扣券';
                                break;
                            case 'D':
                                label = '打车券';
                                break
                            default:
                                label = '--';
                        }
                        return label;
                    }
                },
                {
                    title: "优惠内容",
                    dataIndex: "couponPrice",
                    key: "couponPrice",
                    render: (text, record) => {
                        if (record.couponType === 'J') {
                            return <React.$Price price={record.couponPrice} />
                        }
                        if (record.couponType === 'Z') {
                            return `${React.$transNum(record.couponPrice, 1, -1)}折`
                        }
                        if (record.couponType === 'D') {
                            return <React.$Price price={record.couponPrice} />
                        }
                    }
                },
                {
                    title: "使用门槛",
                    dataIndex: "usePrice",
                    key: "usePrice",
                    render: (text, record) => {
                        if (record.usePrice === -1) {
                            return <div>无条件限制</div>
                        } else {
                            return `满${React.$transNum(record.usePrice, 2, -2)}可用`
                        }
                    }
                },
                {
                    title: "使用期限",
                    render: (text, record) => {
                        if (record.timeType === 1) {
                            return <div>{record.effectiveTime}天</div>
                        } else {
                            return <div>{`${record.startTime}`} 至 {`${record.endTime}`}</div>
                        }
                    }
                },
                {
                    title: "剩余张数",
                    dataIndex: "couponStock",
                    key: "couponStock",
                    render: (text, record) => {
                        if (parseInt(record.couponStock) === -1) {
                            return '无限量'
                        } else {
                            return record.couponStock
                        }
                    }
                },
                {
                    title: '操作',
                    render: (text, record, index) => {
                        return <Popconfirm title="是否确认移除？" okText="是" cancelText="否" onConfirm={() => this.delConfirm(record, index)}>
                            <TheButton type="link" size="middle" className="goodsAdd" >
                                移除
                            </TheButton>
                        </Popconfirm>

                    }
                }
            ],
            couponsColumns: [
                {
                    title: "优惠券名称",
                    dataIndex: "couponTitle",
                    key: "couponTitle",
                    width: 180,
                    render: (text, record) => {
                        return <div className="p-white-space" style={{ width: 140 }}>{record.couponTitle}</div>
                    }
                },
                {
                    title: "优惠券类型",
                    dataIndex: "couponType",
                    key: "couponType",
                    width: 180,
                    render: (text, record) => {
                        let label = ''
                        switch (text) {
                            case 'J':
                                label = '代金券';
                                break;
                            case 'Z':
                                label = '折扣券';
                                break;
                            case 'D':
                                label = '打车券';
                                break;
                            default:
                                label = '--';
                        }
                        return label;
                    }
                },
                {
                    title: "优惠内容",
                    dataIndex: "couponPrice",
                    key: "couponPrice",
                    render: (text, record) => {
                        if (record.couponType === 'J') {
                            return <React.$Price price={record.couponPrice} />
                        }
                        if (record.couponType === 'Z') {
                            return `${React.$transNum(record.couponPrice, 1, -1)}折`
                        }
                        if (record.couponType === 'D') {
                            return <React.$Price price={record.couponPrice} />
                        }
                    }
                },
                {
                    title: "使用门槛",
                    dataIndex: "usePrice",
                    key: "usePrice",
                    render: (text, record) => {
                        if (record.usePrice === -1) {
                            return <div>无条件限制</div>
                        } else {
                            return `满${React.$transNum(record.usePrice, 2, -2)}可用`
                        }
                    }
                },
                {
                    title: "使用期限",
                    render: (text, record) => {
                        if (record.timeType === 1) {
                            return <div>{record.effectiveTime}天</div>
                        } else {
                            return <div>{`${record.startTime}`} 至 {`${record.endTime}`}</div>
                        }
                    }
                },
                {
                    title: "剩余张数",
                    dataIndex: "couponStock",
                    key: "couponStock",
                    render: (text, record) => {
                        if (parseInt(text) === -1) {
                            return '无限量'
                        } else {
                            return parseInt(text).toLocaleString()
                        }
                    }
                },
            ],
            dataSource: [],
            couponsData: [],
            selectedRowKeys: [],
            selectedRows: [],
            loading: false,
            visible: false,
        }
    }
    componentWillReceiveProps(nextProps) {
        console.log(nextProps.coupons);
        this.setState({
            dataSource: nextProps.coupons,
            selectedRowKeys: nextProps.coupons.map(item=>item.couponId)
        });
    }
    handleCancel = () => {
        this.setState({
            selectedRowKeys: [],
            loading: false,
            visible: false
        })
    }
    handleOk = async () => {
        this.setState({
            visible: false,
            dataSource: this.state.selectedRows
        }, () => {
            this.props.addCoupons({ coupons: this.state.dataSource })
        })
    }
    onSelectChange = (selectedRowKeys, selectedRows) => {
        console.log(selectedRowKeys);
        this.setState({ selectedRowKeys, selectedRows })
    };

    getCouponsPage = async () => {
        let res = await apiGetSheetDetailActivePage()
        console.log(res.data[0].couponId,'res.data[0].couponId');
        this.setState({
            couponsData: res.data.map(v => {
                return {
                    ...v,
                    key: v.couponId
                }
            }),
        })
    }
    addCoupons = () => {
       
        this.setState({
            visible: true
        },()=>{
            this.getCouponsPage()
        })
    }
    delConfirm = (value, index) => {
        const { dataSource, selectedRowKeys } = this.state
        dataSource.splice(index, 1)
        selectedRowKeys.splice(index, 1)
        this.setState({
            dataSource: [],
            selectedRowKeys: []
        }, () => {
            this.setState({
                dataSource,
                selectedRowKeys
            })
            this.props.addCoupons({ coupons: dataSource })
        })
    }
    render() {
        const { columns, dataSource, visible, couponsColumns, couponsData,  selectedRowKeys } = this.state
        const rowSelection = {
            type: 'checkbox', 
            selectedRowKeys,
            onChange: this.onSelectChange
        };
        return (
            <div className="PromotionsBox" style={{ width: 1300 }}>
                <TheButton type="default" size="middle" className="PromotionsAdd" onClick={this.addCoupons}>
                    添加优惠券
                </TheButton>
                <TheTable columns={columns} dataSource={dataSource}  scroll={{ x: 'max-content', y: '350px' }}></TheTable>
                <TheDialog
                    width={1200}
                    height={800}
                    title={'添加优惠券'}
                    visible={visible}
                    handleCancel={this.handleCancel}
                    handleOk={this.handleOk}
                >
                    <div style={{ marginBottom: -30 }}>
                        <Table
                            bordered
                            rowSelection={rowSelection}
                            columns={couponsColumns}
                            dataSource={couponsData}
                            pagination={false}
                            scroll={{ x: 'max-content', y: '50vh' }}
                        />
                    </div>
                </TheDialog>
            </div>
        )
    }

}
export default Coupons